<head>
    <meta charset="utf-8" />
    <title>Vuejs简单示例</title>

    <script src='../lib/vue.min.js'></script>
</head>

<body>
    <!--定义一个id为demo的div-->
    <div id="demo">

        <!--此处的msg为在vuejs中定义的变量，放在两个花括号中-->
        <h1>{{msg}}</h1>
        <my-component v-bind:items='items'></my-component>

    </div>
    <!--自定义组件模板-->
    <script type="text/x-tmplate" id="my_component">
        <form @submit.prevent="additem(newitem)">
            <div v-for="item in items">
                <p>{{ item.text }}</p>
            </div>
            <div>
                <input type="text" v-model="newitem.text">
            </div>
            <div>
                <button>添加</button>
            </div>
        </form>
    </script>
    <script>
        Vue.component('my-component', {
            template: '#my_component',
            props: ['msg', 'items'],
            data: function() {
                return {
                    newitem: {
                        text: ''
                    }
                }
            },
            methods: {
                additem: function(newitem) {
                    this.items.push(newitem)
                    this.newitem = {
                        text: ''
                    }
                }
            }
        })

        new Vue({
            el: '#demo',
            data: {
                msg: '实验楼第一个vuejs示例',
                items: [{
                    text: 'hello 实验楼'
                }]

            }

        })
    </script>
</body>

</html>